<template>
  <div class="app-container" style="width: 700px;margin: 30px auto">
    <h3>肌电数据采集</h3>
    <div style="margin: 3em 7%;color: red;">
      请患者在医护人员的指导下使用系统配套的肌电设备
      <br>
      以及软件采集盆底肌肌电数据，并将采集到的四个特征数据填如以下相应部分。
    </div>
    <el-form label-width="200px" :model="info" ref="infoForm" :rules="infoRules">
      <el-row>
        <el-col>
          <el-form-item label="平均肌电值：" prop="average_emg">
            <el-input v-model="info.average_emg" clearable class="all"   />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="中位频率值：" prop="median_frequency">
            <el-input v-model="info.median_frequency" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="变异系数：" prop="variation_coefficient">
            <el-input v-model="info.variation_coefficient" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="上升/下降时间：" prop="up_down_time">
            <el-input v-model="info.up_down_time" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" style="margin: 30px auto;" @click="next(infoForm)">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { getToken, setToken, removeToken, getCacheInfo, cacheInfo, removeCacheInfo } from '@/utils/auth'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '/src/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
import { emgData } from '@/api/login'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()


interface Info{
  average_emg: string
  median_frequency: string
  variation_coefficient: string
  up_down_time: string
}
const info = reactive<Info>(getCacheInfo())

const infoForm = ref<FormInstance>()

const infoRules = reactive<FormRules<Info>>({
  average_emg:[
    { required:true, trigger: "blur", message: "请输入平均肌电值"}
  ],
  median_frequency:[
    { required:true, trigger: "blur", message: "请输入中位频率值"}
  ],
  variation_coefficient:[
    { required:true, trigger: "blur", message: "请输入变异系数"}
  ],
  up_down_time:[
    { required:true, trigger: "blur", message: "请输入上升/下降时间"}
  ],
})

const next = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emgData({user_data_id:info.user_id,
          average_emg:info.average_emg,
          median_frequency:info.median_frequency,
          variation_coefficient:info.variation_coefficient,
          up_down_time:info.up_down_time}).then( () => {
        router.push({ path: "/result" });
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// const created= () => {
//   console.log("emg-created-info",info)
// }
// created()

</script>

<style scoped>
.all {
  width: 70%;
}
</style>
